<template>
	<view class="me-box">
		<view class="me-top">
			<view class="flex justify-start" @tap="editInfo()">
				<view
					class="cu-avatar lg mr-15"
					:class="appSetting.circleAvatar ? 'round' : 'radius'"
					:style="[{ backgroundImage: 'url(' + loginStore.userInfo.avatar + '?imageView2/1/w/100/h/100/q/60' + ')' }]"
				></view>
				<view class="im-flex im-justify-content-start im-columns">
					<view class="mb-5 f-18 im-flex im-align-items-center">
						<view class="name-c">{{ loginStore.userInfo.realname }}</view>
					</view>
					<view class="account" v-if="loginStore.userInfo.cl_code">畅了号：{{ loginStore.userInfo.cl_code }}</view>
					<view class="account" v-if="teamCode">推荐人：{{ teamCode }}</view>
					<view class="flex text-gray text-gray-2">
						<image
							@click.stop="toVip('vipCentre')"
							v-if="time < member_expire"
							class="text-gray-2-icon"
							src="../../static/image/vip/vip-1.png"
							mode="widthFix"
						></image>
						<view class="cu-tag" :class="loginStore.userInfo.is_auth ? 'bg-orange' : 'bg-grey'">
							{{ loginStore.userInfo.is_auth ? "已认证" : "未认证" }}
						</view>
						<view class="level-icon-wrap" v-if="level.icon" @click.stop="toDetailRule">
							<image class="level-icon" :src="level.icon" mode="widthFix"></image>
							{{ level.name }}
						</view>
            

						<!-- <view class="cu-tag" v-if="level.name">
              {{ level.name }}
            </view> -->
					</view>
          <view class="flex text-gray text-gray-2 title-province-1" v-if="title">
            <view class="cu-tag">
              {{title.province}}第一人
            </view>
          </view>
				</view>
			</view>
			<view class="iconfont icon-m04 f-24 text-hui" @click="openQr"></view>
		</view>

		<view class="me-list-wrap">
			<!-- vip v-if="time > userInfo.member_expire" -->
			<!-- <view class="vip-wrap" @click="toVip('vip')">
        <view class="vip-left">
          <view class="vip-left-1">
            <image class="vip-left-icon" src="../../static/image/vip/vip-2.png" mode="widthFix"></image>
            <view class="vip-left-text">VIP会员</view>
          </view>
          <view class="vip-left-2">六大权益等你来拿</view>
        </view>
        <view class="vip-right">
          <view class="vip-right-text">
            <text>立即</text>
            <text>开通</text>
          </view>
          <view class="vip-right-decorate">></view>
        </view>
      </view> -->

			<view class="me-list">
				<Cell label="扫一扫" rightIcon leftIcon="icon-b01" @click.stop="scan" />

				<Cell class="cell-2" label="会员中心" rightIcon leftIcon="icon-b08" @click.stop="toVip('index')" />

				<!-- <Cell label="分享" rightIcon leftIcon="../../static/image/me/share.png" @click.stop="share" /> -->

				<!-- <Cell label="我的团队" rightIcon leftIcon="../../static/image/me/team.png" @click.stop="teamClick" /> -->

				<!-- <Cell label="贡献值明细" rightIcon leftIcon="../../static/image/me/team.png" @click.stop="toDetail" /> -->

				<!--  <Cell
          :class="{
            'novice-guide-operate': !noviceGuide.includes(18) && noviceGuide.includes(17)
          }"
          label="账号安全"
          rightIcon
          leftIcon="../../static/image/me/2.png"
          @click.stop="showsecure"
        /> -->

				<!-- <Cell
          :class="{
            'novice-guide-operate': !noviceGuide.includes(17) && noviceGuide.includes(16)
          }"
          label="我的资料"
          rightIcon
          leftIcon="../../static/image/me/3.png"
          @click.stop="editInfo"
        /> -->

				<Cell
					:class="[{ 'novice-guide-operate': !noviceGuide.includes(16) }, 'cell-2']"
					label="我的收藏"
					rightIcon
					leftIcon="icon-b09"
					@click.stop="collect"
				/>

				<!-- <Cell label="问候功能" rightIcon leftIcon="../../static/image/me/5.png" @click.stop="toGreetings" /> -->

				<!-- <Cell v-if="globalConfig.demon_mode" label="关于IM" rightIcon @click.stop="about">
          <template #leftIcon>
            <text class="cuIcon-info text-green me-li-icon"></text>
          </template>
        </Cell> -->

				<Cell label="问候功能" rightIcon leftIcon="icon-b10" @click.stop="toGreetings" />

				<Cell label="意见反馈" rightIcon leftIcon="icon-b11" @click.stop="toFeedback" />

				<!-- #ifdef APP-PLUS -->
				<Cell label="我要开播" rightIcon leftIcon="../../static/image/me/kaibo.png" @click.stop="openLive" />
				<!-- #endif -->

				<Cell class="cell-2" label="设置" rightIcon leftIcon="icon-b05" @click.stop="toSetIndex" />

				<!-- <Cell
          class="cell-2"
          label="直播广场"
          rightIcon
          leftIcon="../../static/image/me/zhibo.png"
          @click.stop="liveSquare"
        /> -->
			</view>
		</view>

		<view class="quit-btn" @tap="logout()">退出登录</view>

		<view
			class="novice-guide-box"
			v-if="!noviceGuide.includes(16) || !noviceGuide.includes(17) || !noviceGuide.includes(18)"
		></view>
		<view class="novice-guide-location-box" v-else-if="!noviceGuide.includes(16)">会员续费、开通会员</view>
		<view class="novice-guide-location-box" v-else-if="!noviceGuide.includes(17)">修改密码、认证账户</view>
		<view class="novice-guide-location-box" v-if="!noviceGuide.includes(18)">个人资料，包括头像、昵称、签名等</view>

		<Popup round v-model:show="collectShow" class="popup-dialog">
			<view class="collect-show-title">{{ collectTitle }}</view>

			<input type="password" maxlength="6" class="collect-inp" v-model="collectInp" placeholder="请输入收藏密码" />

			<view class="collect-btns">
				<view class="collect-btn cancel" @click="collectCancel">取消</view>
				<view class="collect-btn confirm" @click="collectConfirm">确定</view>
			</view>
		</Popup>
	</view>
</template>

<script>
import Cell from "@/components/Cell/Cell.vue"
import Popup from "@/components/Popup/Popup.vue"
import { useloginStore } from "@/store/login"
import pinia from "@/store/index"
import scan from "@/common/scan.js"
const loginStore = useloginStore(pinia)
export default {
	data() {
		return {
			level: {},
      title:0,
			noviceGuide: uni.getStorageSync("noviceGuide") || [],
			loginStore: loginStore,
			globalConfig: loginStore.globalConfig,
			appSetting: loginStore.appSetting,
			userInfo: loginStore.userInfo,
			time: Math.round(new Date().getTime() / 1000),
			collectShow: false,
			collectTitle: "收藏密码",
			collectInp: "",
			member_expire: 0,
		}
	},
	components: { Cell, Popup },
	computed: {
		teamCode() {
			return this.userInfo.referrer_info ? this.userInfo.referrer_info.mobile : ""
		},
	},
	activated() {
		this.getMemberexPire()
	},
	onShow() {
		this.getMemberexPire()
	},
	mounted() {
		this.getMemberexPire()
		loginStore.getGlobalConfig()
	},
	methods: {
		toDetailRule() {
			uni.navigateTo({
				url: "/pages/mine/detail-rule",
			})
		},
		//跳转 <收藏>
		toCollect(channel) {
			console.log(channel, "channel")
			// uni.navigateTo({
			// 	url: "/pages/preview/collect",
			// })

			this.collectShow = false
			uni.navigateTo({
				url: `/pages/preview/collect?id=${0}&is_group=0&channel=${channel}`,
			})
		},
		//设置收藏密码
		collectpwd(pwd) {
			uni.showToast({
				title: "设置密码...",
				icon: "loading",
				mask: true,
				duration: 999999,
			})

			this.$api.msgApi
				.collectpwd({
					pwd: pwd,
				})
				.then((res) => {
					// uni.hideToast();
					if (res.code === 0) {
						this.toCollect(res.data.channel ?? 0)
					}
				})
		},
		//验证收藏密码
		collectcheck(pwd) {
			uni.showToast({
				title: "密码验证中...",
				icon: "loading",
				mask: true,
				duration: 999999,
			})

			this.$api.msgApi
				.collectcheck({
					pwd: pwd,
				})
				.then((res) => {
					// uni.hideToast();
					if (res.code === 0) {
						uni.hideToast()
						this.toCollect(res.data.channel ?? 0)
					} else if (res.code === 400) {
						uni.showToast({
							title: res.msg,
							icon: "none",
						})
					} else if (res.code === 402) {
						this.collectTitle = "设置收藏密码"
						// uni.showModal({
						//   title: '设置收藏密码',
						//   editable: true,
						//   placeholderText: '请先设置您的收藏密码',
						//   confirmColor: '#1a66ff',

						//   success: (res) => {
						//     if (res.confirm) {
						//       this.collectpwd(res.content);
						//     } else if (res.cancel) {
						//     }
						//   }
						// });
					}
				})
				.catch((err) => {
					uni.hideToast()
				})
		},

		collectCancel() {
			this.collectShow = false
			this.collectInp = ""
		},
		collectConfirm() {
			this.collectTitle === "收藏密码" ? this.collectcheck(this.collectInp) : this.collectpwd(this.collectInp)
		},
		collect() {
			this.collectShow = !this.collectShow
			// uni.showModal({
			//   title: '请输入密码',
			//   editable: true,
			//   placeholderText: '请输入密码',
			//   confirmColor: '#1a66ff',
			//   success: (res) => {
			//     if (res.confirm) {
			//       this.collectcheck(res.content);
			//     } else if (res.cancel) {
			//     }
			//   }
			// });
		},
		//分享
		share() {
			uni.navigateTo({
				url: "/pages/index/qrcode?ref=share",
			})
		},
		// 推荐人
		teamClick() {
			uni.navigateTo({
				url: "/pages/mine/team",
			})
		},
		//贡献值明细
		toDetail() {
			uni.navigateTo({
				url: "/pages/mine/detail",
			})
		},
		//我要开播
		openLive() {
			uni.navigateTo({
				url: "/pages/live/openLive/index",
			})
		},
		//直播广场
		liveSquare() {
			uni.navigateTo({
				url: "/pages/live/square/index",
			})
		},
		//问候功能
		toGreetings() {
			uni.navigateTo({
				url: "/pages/greetings/greetings/greetings",
			})
		},
		//意见反馈
		toFeedback() {
			uni.navigateTo({
				url: "/pages/mine/feedback",
			})
		},
		getMemberexPire() {
			this.$api.msgApi
				.getMemberexPire({})
				.then((e) => {
					this.member_expire = e.data.member_expire ?? 0
					const userInfo = uni.getStorageSync("userInfo")
					userInfo.member_expire = e.data.member_expire ?? ""
					Object.assign(this.level, e.data.level)
					uni.setStorageSync("userInfo", userInfo);
          this.title = e.data.title;
				})
				.catch((error) => {})
		},
		toVip(path) {
			this.changeNoviceGuide(16)
			// uni.showToast({
			// 	title: "敬请期待",
			// 	icon: "none",
			// })'
			uni.navigateTo({
				url: `/pages/vip/${path}`,
			})
		},
		logout() {
			let client_id = uni.getStorageSync("client_id")
			this.$api.LoginApi.logout({
				client_id: client_id,
			}).then((res) => {
				if (res.code == 0) {
					loginStore.logout()
				}
			})
		},
		about() {
			if (this.globalConfig && this.globalConfig.demon_mode) {
				let srcs = "https://im.raingad.com"
				uni.navigateTo({
					url: "/pages/mine/webview?src=" + srcs,
				})
			} else {
				uni.navigateTo({
					url: "/pages/mine/about",
				})
			}
		},
		toSetIndex() {
			uni.navigateTo({
				url: "/pages/mine/set/index",
			})
		},
		showsecure() {
			this.changeNoviceGuide(18)
			uni.navigateTo({
				url: "/pages/mine/secure",
			})
		},
		editInfo() {
			this.changeNoviceGuide(17)

			uni.navigateTo({
				url: "/pages/mine/profile/index",
			})
		},
		changeNoviceGuide(n) {
			if (!this.noviceGuide.includes(n)) {
				this.noviceGuide.push(n)
				uni.setStorageSync("noviceGuide", this.noviceGuide)
			}
		},
		scan() {
			scan.scanQr()
		},
		openQr() {
			uni.navigateTo({
				url: "/pages/index/qrcode",
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.me-icon {
	width: calc(var(--amplified_base) * 32rpx);
	height: calc(var(--amplified_base) * 32rpx);
	margin-right: calc(var(--amplified_base) * 12rpx);
}

.me-box {
	min-height: 100vh;
	padding-bottom: 150rpx;
	background: linear-gradient(202deg, #c5dcff 0%, #f0f3f7 30%, #f0f3f7 89.59%);
}

.title-province-1{
  margin-top: 8rpx;
}

.novice-guide-box {
	z-index: 1000;
}

.novice-guide-operate {
	z-index: 1001;
	background-color: #fff;
}

.novice-guide-location-box {
	z-index: 1001;
	bottom: auto;
	top: 100rpx;
	font-size: 48rpx;
}

.me-top {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 112rpx 48rpx;
	// padding: 84rpx 48rpx 304rpx;

	// background: linear-gradient(360deg, #f7b9ac 0%, #f08a7c 100%);
	// overflow: hidden;

	// &::after {
	//   position: absolute;
	//   z-index: 0;
	//   top: 40%;
	//   right: 20%;
	//   content: '';
	//   width: 1050rpx;
	//   height: 750rpx;
	//   border-radius: 50%;
	//   background: linear-gradient(#f08c7eff 0%, #f08c7e00 30%);
	// }

	// &::before {
	//   position: absolute;
	//   z-index: 0;
	//   top: 0;
	//   left: 10%;
	//   content: '';
	//   width: 1400rpx;
	//   height: 1400rpx;
	//   border-radius: 50%;
	//   background: linear-gradient(#f08c7eff 0%, #f08c7e00 20%);
	// }

	.account {
		color: #677184;
		max-width: 500rpx;
		word-wrap: break-word;
	}

	.text-gray-2 {
		flex: 1;
		display: flex;
		align-items: center;
		padding-right: 20rpx;

		.text-gray-2-icon {
			width: 100rpx;
		}
	}

	.justify-start {
		align-items: center;
		position: relative;
		z-index: 1;

		.cu-avatar {
			width: 120rpx;
			height: 120rpx;
			margin-right: 24rpx;
		}

		.name-c {
			color: #141729;
			font-size: 40rpx;
			font-weight: bold;
		}

		.level-icon-wrap {
			display: flex;
			align-items: center;
			border-radius: 999rpx;
			margin-left: 12rpx;
			background: #d9e9f8;
			color: #22436d;
			font-size: 20rpx;
			padding: 0 12rpx;

			.level-icon {
				width: 28rpx;
			}
		}

		.cu-tag {
			color: #8b5a54;
			font-size: 20rpx;
			padding: 0;
			height: 2em;
			line-height: 1em;
			padding: 0 12rpx;
			border-radius: 999rpx;
			margin-left: 12rpx;
			background: #d9e9f8;
			color: #22436d;
		}
	}

	.cuIcon-qrcode {
		position: relative;
		z-index: 1;
		color: #333;
	}
}

:deep(.cell){
  width: 100%;
  max-width: 100%;
}

.me-list-wrap {
  width: 100%;
	position: relative;
	// top: -214rpx;
}

.vip-wrap {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;

	width: 686rpx;
	margin: 0 auto;
	padding: 30rpx 42rpx 30rpx;
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	background: linear-gradient(360deg, #2e2e33 0%, #4e4e56 100%);

	color: #cfb37c;

	.vip-left-text {
		font-size: 38rpx;
		font-weight: bold;
		color: #ffe0a3;
	}

	.vip-left-1 {
		display: flex;
		align-items: center;

		.vip-left-icon {
			width: 40rpx;
			margin-right: 10rpx;
		}
	}

	.vip-left-2 {
		letter-spacing: 6rpx;
	}

	.vip-right {
		width: calc(var(--amplified_base) * 170rpx);
		height: calc(var(--amplified_base) * 56rpx);
		border-radius: 999rpx;
		color: #593e11;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(90deg, #ffe49d 0%, #fff2d8 100%);

		.vip-right-text {
			flex-wrap: wrap;
			display: flex;
			justify-content: center;
			font-size: calc(var(--amplified_base) * 24rpx);
			font-weight: bold;
			// letter-spacing: 2rpx;
		}
	}

	.vip-right-decorate {
		width: 24rpx;
		height: 24rpx;
		background: #593e11;
		border-radius: 50%;
		color: #ffefce;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
}

.me-list {
	display: flex;
	flex-direction: column;
	// background-color: #fff;
	// border-radius: 40rpx 40rpx 0 0;
	overflow: hidden;

	.me-list-li {
		position: relative;
		display: flex;
		justify-content: space-between;
		padding: 32rpx 40rpx;

		.me-list-li-icon {
			width: 40rpx;
		}

		.me-li-icon {
			font-size: 42rpx;
			margin-right: 10rpx;
		}

		.content {
			display: flex;
			align-items: center;
		}
	}

	.li-1 {
		border-bottom: 16rpx solid #fafafa;
	}
}

.quit-btn {
	max-width: 700rpx;
	width: calc(var(--amplified_base) * 312rpx);
	margin: 0 auto;
	margin-top: 100rpx;
	line-height: calc(var(--amplified_base) * 80rpx);
	text-align: center;
	// background: #1a66ff;
	// border-radius: 40rpx 40rpx 40rpx 40rpx;
	border-radius: 8rpx;
	border: 1rpx solid #626d82;
	font-size: calc(var(--amplified_base) * 30rpx);
	color: #626d82;
	font-weight: 500;
}
.text-hui {
	color: #666;
}

:deep(.popup-dialog) {
	width: 600rpx;
	text-align: center;

	.collect-show-title {
		padding: 40rpx;
		font-size: 38rpx;
		letter-spacing: 2rpx;
		font-weight: bold;
	}

	.collect-inp {
		width: 80%;
		margin-left: 10%;
		border: 1rpx solid #f4f4f4;
		padding: 20rpx;
	}

	.collect-btns {
		margin-top: 40rpx;
		display: flex;
		border-top: 1rpx solid #f4f4f4;

		.collect-btn {
			line-height: 1;
			padding: 30rpx;
			width: 50%;
			cursor: pointer;
		}

		.cancel {
			border-right: 1rpx solid #f4f4f4;
		}

		.confirm {
			color: var(--subject_color);
		}
	}
}
</style>
